<template>
    <div class="loading">
        <div class="oneBall"></div>
        <div class="twoBall"></div>
        <div class="threeBall">.loading.</div>
    </div>
</template>

<script>
export default {
    // Loading
    name: 'Loading',
    data(){
        return {
            xxoo: true
        }
    },
}
</script>

<style lang="scss" scoped>
.loading{
    width: 200px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    div{
        position: absolute;
        width: 80px;
        height: 80px;
        border: 5px solid #20AAE9;
        border-radius: 50%;
        display: inline-block;
    }
    .oneBall{
        animation: one 1s linear infinite;
    }
    .threeBall{
        line-height: 80px;
        text-align: center;
    }
}

@keyframes one {
    form{
        width: 80px;
        border: 3px solid #20AAE9;
        height: 80px;
    }
    to{
        width: 200px;
        border: 1px solid #20AAE9;
        height: 200px;
    }
}
</style>